<template>
  <div class="container">
    <!-- 上方按钮 -->
    <div class="handle-box">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="企业名称" prop="shortName">
              <!-- <el-input v-model="ruleForm.shortName"></el-input> -->
              <el-autocomplete class="inline-input" v-model="ruleForm.shortName" :fetch-suggestions="querySearch"
                placeholder="请输入内容" @select="((item)=>handleSelect(item))" @input="selectVal">
              </el-autocomplete>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="预定方式" prop="reserveType">
          <el-radio-group v-model="ruleForm.reserveType">
            <el-radio label="1">在线预订</el-radio>
            <el-radio label="2">电话预定</el-radio>
            <el-radio label="0">其它方式</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="预定状态" prop="auditStatus">
          <el-radio-group v-model="ruleForm.auditStatus">
            <el-radio label="1">预定成功</el-radio>
            <el-radio label="0">等待确认</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-row>
          <el-col :span="8">
            <el-form-item label="预定招聘会" prop="jobFairId">
              <el-select v-model="ruleForm.jobFairId" placeholder="请选择招聘会">
                <!-- <el-option label="招聘1" value="shanghai"></el-option>
                <el-option label="招聘456" value="beijing"></el-option> -->
                <el-option v-for="item in optionsData" :key="item.id" :label="''+item.title+''" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="展位位置">
          <!-- 展位位置 -位置选择组件 -->
          <location-selection @jobseatNum="jobseatNum" :place="ruleForm.place" :regionVal="regionVal">
          </location-selection>
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="ruleForm.remark" rows="10" cols="5"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="公司福利">
              <p class="job_welfare">
                <span class="welfare">增加公司标签，提升公司诱人指数 (最多可选择 8 个) </span> <span class="esitTag" @click="esitTag"><img
                    src="../../../assets/img/add_tag.png" alt=""> 修改标签</span>
              </p>
              <div class="tag-group">
                <el-tag v-for="(item,index) in allure" :key="index" effect="plain">
                  {{ item.name }}
                </el-tag>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="联系人" prop="contact">
              <el-input v-model="ruleForm.contact"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="联系方式" prop="phone">
              <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="联系邮箱" prop="mail">
              <el-input v-model="ruleForm.mail"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <div class="btn">
            <el-button type="primary" :loading="isloading" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">取消返回</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 设置公司标签组件 -->
    <set-CompanyLabel :esitTagBoolean="esitTagBoolean" @close="close" @confirmHaveTag="confirmHaveTag" :allure="allure">
    </set-companyLabel>
  </div>
</template>

<script>
// 设置展位位置组件
import locationSelection from './components/locationSelection'

// 设置公司标签组件
import setCompanyLabel from './components/setCompanylabel'
import { acompanyLists, getListPage, addCompanyJobFairJob, selectbyname } from '../../../api/JobFair';
import { isvalidPhone } from '@/components/common/validate'
//定义一个全局的变量
var validPhone = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入电话号码'))
  } else if (!isvalidPhone(value)) {
    callback(new Error('请输入正确的11位手机号码'))
  } else {
    callback()
  }
}
export default {
  name: 'editenterprise',
  components: {
    locationSelection,
    setCompanyLabel
  },
  created () {
    // this.selectbyname()
    this.getListPage()
  },
  data () {
    return {
      // 禁止多次提交
      isloading: false,
      state1: '',
      restaurants: [],
      // 福利标签
      allure: [],
      esitTagBoolean: false,
      ruleForm: {
        // 名称
        shortName: '',
        // 预定方式
        reserveType: '',
        // 预定状态
        auditStatus: '',
        // 招聘会预定
        jobFairId: '',
        // 招聘会位置
        place: '',
        // 备注
        remark: '',
        // 公司标签组件
        allure: '',
        // 联系人
        contact: '',
        // 手机号
        phone: '',
        // 邮件
        mail: '',
        // 公司ID
        companyId: ''
      },
      rules: {
        shortName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
          // { min: 3, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
        ],
        reserveType: [
          { required: true, message: '请选择预定方式', trigger: 'change' },
        ],
        auditStatus: [
          { required: true, message: '请选择预定状态', trigger: 'change' },
        ],
        contact: [
          { required: true, message: '请输入联系人名称', trigger: 'blur' },
        ],
        phone: [
          { required: true, trigger: 'blur', validator: validPhone }//这里需要用到全局变量
        ],
        mail: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      },
      optionsData: '',
      // 监听下拉框数据变化
      regionVal: ''
    };
  },
  methods: {
    submitForm (formName) {
      this.isloading = true
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.ruleForm.place) {
            this.$message.error('请选择招聘会位置')
            this.isloading = false
            return false
          }
          let allureArr = []
          this.allure.map((item) => {
            allureArr.push(item.val)
          })
          this.ruleForm.allure = JSON.stringify(allureArr) // .join(',')
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.2)'
          });
          addCompanyJobFairJob(this.ruleForm).then((res) => {
            if (res.success) {
              // 因为后端返回数据 res.data 有可能是个boolean 值，有可能是一个data数据 所以要进一步判断一下
              if (typeof (res.data) == 'boolean' && res.data == true) {
                this.$router.go(-1)
                loading.close();
                this.isloading = false
                return false
              }
              if (res.data.success) {
                this.$router.go(-1)
                loading.close();
                this.isloading = false
              } else {
                this.$message.error(res.data.msg)
                loading.close();
                this.isloading = false
              }
            } else {
              this.$message.error(res.msg)
              loading.close();
              this.isloading = false
            }
          })
        } else {
          console.log('error submit!!');
          loading.close();
          this.isloading = false
          return false;
        }
      });
    },
    //   取消并返回
    resetForm (formName) {
      this.$refs[formName].resetFields();
      this.$router.go(-1)
    },
    // 添加标签
    esitTag () {
      this.esitTagBoolean = true
    },
    // 关闭弹框
    close (val) {
      this.esitTagBoolean = val
      this.jobSelectionBoolean = val
    },
    // 设置公司标签事件
    confirmHaveTag (valTag) {
      console.log(valTag)
      this.close(false)
      this.allure = valTag
    },
    jobseatNum (val) {
      console.log('选择位置', val)
      this.ruleForm.place = val
    },
    // 获取回显详情的数据
    getId () {
      let obj = {
        id: this.$route.query.id
      }
      acompanyLists(obj).then((res) => {
        if (res.success) {
          let datas = res.data.records[0]
          datas.auditStatus = String(datas.auditStatus)
          datas.reserveType = String(datas.reserveType)
          datas.jobFairId = datas.jobFairId
          let allListArr = []
          datas.allList.map((item) => {
            let obj = {}
            obj.bOn = true,
              obj.name = item
            allListArr.push(obj)
          })
          this.allure = allListArr
          this.ruleForm = datas
          console.log(datas, '456')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    //  查询预定招聘会下拉框
    getListPage () {
      let obj = {
        title: '',
        reserveStatus: null,
        topStatus: null,
        createTime: '',
        page: 1,
        size: 1000
      }
      getListPage(obj).then((res) => {
        if (res.success) {
          let datas = res.data
          this.optionsData = datas.records
          this.ruleForm.jobFairId = datas.records[0].jobFairId
          console.log(datas, '789456123')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 模糊查询
    // querySearch (queryString, cb) {
    //   this.selectbyname(this.ruleForm.shortName)
    //   var restaurants = this.restaurants;
    //   var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
    //   // 调用 callback 返回建议列表的数据
    //   cb(results);
    // },
    querySearch (queryString, callback) {
      if (!queryString) {
        callback([])
        return false
      }
      var list = [{}];
      var formdata = new FormData();
      formdata.append('name', queryString)
      selectbyname(formdata).then((res) => {
        if (res.success) {
          let datas = res.data

          datas.map((item, i) => {
            item.value = item.name;
          })
          this.restaurants = datas
          console.log(datas, '谋划查询')
          list = datas
          callback(list);
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    createFilter (queryString) {
      if (!queryString) return false
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect (item) {
      this.ruleForm.companyId = item.id
      this.ruleForm.name = item.name
      console.log(this.ruleForm.companyId, this.resetForm.name, '模糊查询')
    },
    // ID 穿空
    selectVal (item) {
      this.ruleForm.name = item
      this.ruleForm.companyId = ''
    },
    // 模糊查询企业名称
    selectbyname (item) {
      var formdata = new FormData();
      formdata.append('name', item)
      selectbyname(formdata).then((res) => {
        if (res.success) {
          let datas = res.data

          datas.map((item, i) => {
            item.value = i
          })
          this.restaurants = datas
          console.log(datas, '谋划查询')
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  },
  watch: {
    'ruleForm.jobFairId': {
      handler (newVal) {
        this.regionVal = newVal
      },
      deep: true
    }
  }
}
</script>

<style scoped>
/* 公司福利 */

.job_welfare {
    display: flex;
    align-items: center;
}
.welfare {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(34, 34, 34, 1);
    margin-right: 16px;
    opacity: 1;
}
.esitTag {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #0093ff;
}
.esitTag img {
    width: 13px;
    height: 13px;
    margin-right: 3px;
}
.tag-group .el-tag {
    margin-right: 20px;
}

.enterprise {
    margin-left: 54px;
    margin-top: 11px;
}

.btn /deep/ button {
    width: 100px;
}
</style>